<template>
	<view>
		<view style="padding: 5px 40upx;background: #fff;position: fixed;z-index: 999;width: 100%;box-sizing: border-box;height: 60upx;top: 0;">
			<view style="background: #efefef;position: relative;border-radius: 15upx;height: 46upx;">
				<image src="../../static/search.png" style="width: 36upx;height: 36upx;position: absolute;top: 4px;left: 16px;" mode=""></image>
				<input type="text" @confirm="searchGoods" confirm-type="search" style="padding-left: 40px;">
			</view>
		</view>
		<view style="height: 80upx;width: 100%;display: flex;justify-content: space-around;position: fixed;z-index: 999;top: 60upx;background-color: #fff;">
			<view @click="menusclick(index)" v-for="(item,index) in menus" :key='index' :class="{active:cIndex===index}" style="text-align: center;line-height: 80upx;">
				{{item}}
			</view>
		</view>
		<!-- <uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件" fixed="true" style="top:0"  @click-right="changeliststyle"></uni-nav-bar> -->
		<view class="content clear" :class="!liststyle ? '' : 'liststyle'" style="padding-top: 70px;">
			<view v-for="(item,index) in res" :key="index"  @tap="opendetail" :data-newsid="item.id">
				<view class="list">
					<view class="imgbox">
						<image class="image" :src="item.thumb"></image>
					</view>
					<view class="detail">
						<view class="name" v-cloak>{{item.title}}</view>
						<view class="productprice" v-cloak>¥{{item.productprice}}</view>
						<view class="price">
							<view class="text" v-cloak>¥{{item.marketprice}}</view>
							<view class="buy">
								<image src="http://easycolor.juxingqiansheng.com/attachment/images/5/2018/10/jifen.png"></image>
								<!-- <text>{{item.jfbl}}%</text> -->
							</view>
						</view>
					</view>
						<view class="buy-btn">
							<button class="mini-btn buybutton" >购买</button>
						</view>
				</view>
			</view>
		</view>
		<view v-if="res.length == 0">
			<image src="../../static/order4.png" mode="" style="width: 240upx;height: 240upx;display: block;margin: 0 auto;margin-top: 150upx;"></image>
			<text style="display: block;text-align: center;color: #999;">暂时没有任何商品</text>
		</view>
		<uni-load-more v-if="load == 1 && res.length != 0"  :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		<!-- 遮罩 -->
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" @click="onTap" />
		<uni-transition :duration="300" :mode-class="modeClass" :styles="transfromClass" :show="transShow"  @change="change" class="filbox">
			<view style="width: 750upx;">
				<view style="height: 220upx;">
					<view style="height: 110upx;display: flex;flex-wrap: nowrap;">
						<view style="height: 66upx;flex: 1;text-align: center;">
							<view style="width: 200upx;border: 4upx solid #333333;height: 66upx;line-height: 66upx;display: inline-block;border-radius: 8upx;" :class="{select:isrecommand===1}" @click="chgnum('isrecommand')">推荐商品</view>
						</view>
						<view style="height: 66upx;flex: 1;text-align: center;">
							<view style="width: 200upx;border: 4upx solid #333333;height: 66upx;line-height: 66upx;display: inline-block;border-radius: 8upx;" :class="{select:isnew===1}" @click="chgnum('isnew')">新品上市</view>
						</view>
						<view style="height: 66upx;flex: 1;text-align: center;">
							<view style="width: 200upx;border: 4upx solid #333333;height: 66upx;line-height: 66upx;display: inline-block;border-radius: 8upx;" :class="{select:ishot===1}" @click="chgnum('ishot')">热卖商品</view>
						</view>
					</view>
					<view style="height: 110upx;display: flex;flex-wrap: nowrap;">
						<view style="height: 66upx;flex: 1;text-align: center;">
							<view style="width: 200upx;border: 4upx solid #333333;height: 66upx;line-height: 66upx;display: inline-block;border-radius: 8upx;" :class="{select:isdiscount===1}" @click="chgnum('isdiscount')">促销商品</view>
						</view>
						<view style="height: 66upx;flex: 1;text-align: center;">
							<view style="width: 200upx;border: 4upx solid #333333;height: 66upx;line-height: 66upx;display: inline-block;border-radius: 8upx;" :class="{select:issendfree===1}" @click="chgnum('issendfree')">卖家包邮</view>
						</view>
						<view style="height: 66upx;flex: 1;text-align: center;">
							<view style="width: 200upx;border: 4upx solid #333333;height: 66upx;line-height: 66upx;display: inline-block;border-radius: 8upx;" :class="{select:istime===1}" @click="chgnum('istime')">限时抢购</view>
						</view>
					</view>
				</view>
				<view style="height: 60upx;line-height: 60upx;text-align: center;border-top: 1upx solid #D1D1D1;color: #999;border-bottom: 1upx solid #D1D1D1;color: #999;">
					选择分类
				</view>
				<view style="height: 560upx;overflow: scroll;text-align: center;">
					<view style="height: 60upx;text-align: center;" v-for="(item,index) in recommend" :key='index' :class="{active:rIndex===index}" @click="recommendchg(index,item.id)">
						{{item.name}}
					</view>
				</view>
				<view style="height: 60upx;display: flex;justify-content: space-between;">
					<view style="width: 180upx;text-align: center;" @click="onTap">
						取消删选
					</view>
					<view style="width: 180upx;text-align: center;" @click="surechg">
						确认
					</view>
				</view>
			</view>
		</uni-transition>
		
	</view>
</template>
<script>
	import uniLoadMore from '../../components/uni-load-more.vue'
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	import uniTransition from '../../components/uni-transition/uni-transition.vue'
	export default {
		components: {uniNavBar,uniLoadMore,uniTransition},
		data() {
			return {
				cIndex:0,
				rIndex:999, // 删选栏选中状态
				menus:['综合','销量','价格','筛选'],
				category:"",
				keywords:"",
				res:[],
				recommend:{},
				page:1,
				liststyle:false,
				index:2,
				loadingType:0,
				load:0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				order: 0,
				by: 0,
				show: false,
				transShow: false,
				modeClass: ['fade'],
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center'
				},
				isrecommand: 0,
				isnew: 0,
				ishot: 0,
				isdiscount: 0,
				issendfree: 0,
				istime: 0,
				cate: 0,
			};
		},
		onLoad:function(e){
			uni.showLoading()
			var cate = '',keywords = ''
			if (e.cate != undefined) {
				this.category = e.cate
				cate = '&cate='+ e.cate
			} else if (e.keywords != undefined) {
				this.keywords = e.keywords
				keywords = '&keywords='+ e.keywords
			}
			uni.request({
				url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1'+cate+keywords,
				success: res => {
					this.res = res.data.result.list;
					this.recommend = res.data.result.allcategory.parent
					if(res.data.result.total > res.data.result.pagesize){
						this.load = 1
					}
					uni.hideLoading();
				},
				fail: () => {},
				complete: () => {}
			});
		},
		onReachBottom(){
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			uni.request({
				url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&cate='+this.category+'&order=&by=&merchid=&page='+this.index,
				method: 'GET',
				success: res => {
					if(res.data.result.list.length == 0){
						this.loadingType = 2;
						return;
					}
					this.res = this.res.concat(res.data.result.list)
					this.loadingType = 0;
					this.index = this.index + 1;
				},
				fail: () => {},
				complete: () => {}
			});
			
		},
		methods:{
			surechg() {
				this.onTap()
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand='+ this.isrecommand +'&ishot='+ this.ishot +'&isnew='+ this.isnew +'&isdiscount='+ this.isdiscount +'&issendfree='+ this.issendfree +'&istime='+ this.istime +'&order=&by=&merchid=&page=1'+ '&cate=' + this.cate + '&keywords='+ this.keywords,
					success: res => {
						this.res = res.data.result.list;
						this.recommend = res.data.result.allcategory.parent
						if(res.data.result.total > res.data.result.pagesize){
							this.load = 1
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 筛选选中类目
			recommendchg(index,id) {
				this.rIndex = index
				this.cate = id
			},
			chgnum(num) {
				if (num == 'isrecommand') {
					this.isrecommand = this.isrecommand == 1 ? 0 : 1
				} 
				else if (num == 'isnew') {
					this.isnew = this.isnew == 1 ? 0 : 1
				}
				else if (num == 'ishot') {
					this.ishot = this.ishot == 1 ? 0 : 1
				}
				else if (num == 'isdiscount') {
					this.isdiscount = this.isdiscount == 1 ? 0 : 1
				}
				else if (num == 'issendfree') {
					this.issendfree = this.issendfree == 1 ? 0 : 1
				}
				else if (num == 'istime') {
					this.istime = this.istime == 1 ? 0 : 1
				}
			},
			menusclick(index){
				this.onTap()
				if (index <= 2) {
					if  (index == 0) {
						this.order = 'sales'
						this.by = 'desc'
					}
					if  (index == 1) {
						this.order = 'sales'
						this.by = 'desc'
					}
					if  (index == 2) {
						this.order = 'minprice'
						this.by = 'asc'
					}
					var data = {
						cate: this.category,
						keywords: this.keywords,
						order: this.order,
						by: this.by
					}
					// 控制多余的显示 cIndex
					this.cIndex = index
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1',
						method: 'GET',
						data: data,
						success: res => {
							this.res = res.data.result.list;
							if(res.data.result.total > res.data.result.pagesize){
								this.load = 1
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else { 
					// 删选功能
					this.cIndex = index
					this.open(['slide-right','fade'])
					
				}
				
			},
			opendetail(e){
				uni.navigateTo({
					url: 'detail?goodsid='+e.currentTarget.dataset.newsid
				});
			},
			changeliststyle(){
				if(this.liststyle == true){
					this.liststyle =false
				}else{
					this.liststyle = true
				}
			},
			searchGoods(e){
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1&keywords='+e.mp.detail.value,
					method: 'GET',
					data: {},
					success: res => {
						this.res = res.data.result.list;
						if(res.data.result.total > res.data.result.pagesize){
							this.load = 1
						}
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
				
			},
			open(mode) {
				this.modeClass = mode
				this.transShow = !this.transShow
				this.show = true
			},
			onTap() {
				this.transShow = this.show = false
			},
			change(e){
				console.log(e.detail);
			}
		}
	}
</script>

<style>
	.select {
		background-color: #000000;
		color: #fff;
	}
	.filbox {
		width: 750upx;
		height: 1000upx;
		background-color: #fff;
		margin-top: 140upx;
	}
	.active {
		color: #f00;
		font-size: 32upx;
	}
	.content{padding:8upx;}.list{padding:10upx;width:346upx;float:left;}.imgbox{height:346upx;}.image{width:346upx;height:346upx;}.detail{padding:20upx;background:#fff;}.buy-btn:after{display:block;content:"";clear:both;}.buy-btn{background:#fff;padding-right:20upx;padding-bottom:20upx;}.name{height:68upx;font-size:26upx;line-height:34upx;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.productprice{line-height:48upx;font-size:24upx;color:#999;text-decoration:line-through;}.price,.buy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.price .text{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#f55;font-size:30upx;line-height:38upx;}.price text{color:#f55}.price image{width:38upx;height:38upx;display:block;margin-right:5upx;position:relative;top:-2upx;}.buy text{line-height:38upx;}.liststyle{padding:0;}.liststyle .list{width:710upx;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#fff;height:196upx;padding:20upx;float:inherit;border-bottom:2upx solid #e7e7e7;}.liststyle .imgbox{height:196upx;background:#fff;}.liststyle .detail{height:156upx;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.liststyle .list .image{width:160upx;height:160upx;margin-top:18upx;}.liststyle .buy-btn{padding:0;padding-top:74upx;}.buybutton{width:90upx;height:48upx;float:right;border:1px solid #fe5455;color:#fe5455;padding:0 15upx;background:#fff;line-height:44upx;font-size:24upx;}
	</style>